<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="<%=basePath%>css/paimai.css">
    <link rel="stylesheet" href="<%=basePath%>css/common_new.min.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/owl.carousel.min.css">
    <link rel="stylesheet" href="<%=basePath%>css/index.css">
    <link rel="stylesheet" href="<%=basePath%>static/layer/2.4/skin/layer.css">
    <script type="text/javascript" src="<%=basePath%>js/jquery.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/layer/2.4/layer.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/kefu.js"></script>
    <script src="<%=basePath%>static/js/owl.carousel.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/vue.min.js"></script>
	
<title>竞价商品</title>
</head>
<style type="text/css">
*{margin:0;padding:0;font-size:12px !important;}
body{background:#f8f8f8;}
.p1,.p2{font-size:16px !important;margin:0px auto;}
.p3{color:#b61687;font-size:20px !important;}
h1{font-size:20px !important;}
.zhuti li{width:288px;height:288px;background:#fff;display:inline-blcok !important;border:1px solid #fff;}
.page{width:33%;height: 40px;margin:0px auto;line-height:40px;text-align:center;}
</style>
<body>
 <!-- 顶部导航栏 -->
        <div id="header">
            <div class="navbar">
        <div class="navbar-content">
            <jsp:include page="yeah-top.jsp"/>
        </div>
       </div>
            <div class="daohang">
                <a href="<%=basePath%>">首页</a>
                <span>></span>
                <a href="tobid">竞价</a>
            </div>
        </div>
	<!-- 轮播图 GO-->
	<div class="waper">
		<jsp:include page="yeah_slider_spjj.jsp" />
	</div>
	<!-- 轮播图 END -->
    <!-- 主体 -->
        <div class="zhuti">
         <h1  style="text-align:center;font-size:18px;color:red;">商品竞价</h1>
            <ul>  
            <c:forEach items ="${pageinfo.list}" var ="bid">
             <a href="javascript:void(0)" onclick="biding(this,'${bid.bid}')">
                <li>
                <img src="${bid.img_url }"/>
                     <input class="bid" type="hidden" value="${bid.bid}"/>
                    <p class="p1">${bid.model}</p>
                    <p class="p2">当前价格：&nbsp;￥${bid.lowprice }</p>
                    <input type="hidden" value="${bid.delivery_time }">
                    <p class="p3 count">
                    </p>
                </li>
                </a>
              </c:forEach> 
            </ul>
        </div>
              <div  class="page">
              <strong>一共<span class="page">${pageinfo.pages}</span>页</strong>
                 <strong>当前页<span class="page">${pageinfo.pageNum}</span></strong>
               <c:if test="${pageinfo.pageNum>1}"><a href="tobid?npage=1">第一页</a></c:if>
                 <c:if test="${pageinfo.pageNum==1}"><a href="javascript:void(0)">第一页</a></c:if>
                 <c:if test="${pageinfo.pageNum==1}"><a href="javascript:void(0)">上一页</a></c:if>
                 <c:if test="${pageinfo.pageNum>1}"><a href="tobid?npage=${pageinfo.prePage}">上一页</a></c:if>
                 <c:if test="${pageinfo.pageNum<pageinfo.pages }"><a href="tobid?npage=${pageinfo.nextPage}">下一页</a></c:if>
                 <c:if test="${pageinfo.pageNum==pageinfo.pages }"><a href="javascript:void(0)">下一页</a></c:if> 
                 <c:if test="${pageinfo.pageNum==pageinfo.pages}">  <a href="javascript:void(0)">最后一页</a></c:if>
                 <c:if test="${pageinfo.pageNum<pageinfo.pages}"><a href="tobid?npage=${pageinfo.pages}">最后一页</a></c:if>
    </div>
    <!-- 底部 -->
      <jsp:include page="bottom.jsp" />
       <!--  <div class="web_bot">
            <p class="li1">
                <span>
                    <a href="#">关于我们</a>
                </span> |
                <span>
                    <a href="#">关于我们</a>
                </span> |
                <span>
                    <span>
                        <a href="#">关于我们</a>
                    </span> |
                    <span>
                        <a href="#">联系我们</a>
                    </span>
            </p>
            <p class="li2">
                <span>
                    <a href="#">沪ICP备17036439号</a>
                </span> |
                <span>
                    <a href="#">沪ICP备17036439号-2</a>
                </span> |
                <span>
                    <span>
                        <a href="#">上海瓜叶网络科技有限公司</a>
                    </span>
            </p>
        </div> -->
<script type="text/javascript">
    // 倒计时函数
    function go() {  
    for (var i = 0; i < list.length; i++) {
        list[i].ele.html(changeTimeStamp(list[i].time));
        //如果相差秒数为0 将它从集合中删除
         var distancetime = list[i].time - new Date().getTime();
        if (distancetime<0) { 
        	//如果时间差小于或者=0  竞价结束
        	list[i].ele.parents("a").attr("href","javascript:msg('此商品已经结束竞价');").removeAttr("onclick");
        	//执行改变该商品竞价记录的状态
        	changeRecordStatus(list[i].ele);
            list.splice(i--, 1);
        }
      }
    }
      var list = [];
      var timer;
   function addTimer(obj,times){
     
          if(!timer){
        	  timer = setInterval(go,1);
          }
          list.push({ele:obj,time:times});
      }
      //得到倒计时
      function changeTimeStamp(times){
    	  
          var distancetime = times - new Date().getTime();
          console.log(distancetime);
          if(distancetime > 0){ 
　　　　//如果大于0.说明尚未到达截止时间
            var day =Math.floor(distancetime/86400000);
            var hour =Math.floor((distancetime-day*86400000)/60/1000/60);
            var min = Math.floor((distancetime-day*86400000-hour*60*60*1000)/60/1000);
            /*  var ms = Math.floor(distancetime/1000/60/60%24/60/60/1000); */
            var sec = Math.floor((distancetime-day*86400000-hour*60*60*1000-min*60*1000)/1000);
              if(sec<10){
                  sec = "0"+ sec;
              }
              if(min<10){
                  min = "0"+ min;
              }
              if(hour<10){
                  hour = "0"+ hour;
              }
              return day+"天 "+ hour + ":" +min + ":" +sec; /* + ":" +ms */
          }else{
   /*  若否，就是已经到截止时间了 */
              return "竞价结束";
          }
      };
  
  $(".zhuti").find("a").each(function(){
		var data =new Date($(this).find("input").eq(1).val());
		var dataTime =data.getTime();
		 console.log(dataTime);
		 addTimer($(this).find(".count"),dataTime);
	});
  
  function msg(){
	  layer.msg("此商品竞价结束！",{icon:2,time:2000});
  }
  
</script>
<script type="text/javascript">
	$(function(){
		$(".zhuti").find("a").on("mouseover",function(){
			$(this).find("li").css("border","1px solid yellow");
			
		}).on("mouseleave",function(){
			$(this).find("li").css("border","1px solid #fff");
		});
	});

	
	//竞价商竞价验证的js
	function biding(obj,bid){
		$.ajax({
			url:"bidcheck",
			type:"post",
			data:{bid:bid},
			dataType:"json",
			success:function(data){
				//判断返回值
				if(data.flag){
					// 为true时 去竞价页面
				 window.location.href="bid?bid="+bid;
				}else{
					//给页面一个提示
					layer.msg(data.msg,{icon:2,time:2000});	
				}
			}
		});	
	}
	
	//改变所有的竞价记录状态为2
	//竞价结束
	 //发送改变竞价记录状态的ajax方法
   function changeRecordStatus(obj){
		//获取竞价商品的id
		var bid =obj.parents("a").find(".bid").val();
		console.log("-------"+bid);
		$.ajax({
			url:"changeRecordStauts",
			data:{"bid":bid},
			type:"post",
			dataType:"json",
			success:function(){
				console.log("-----请求成功！");
			}
		});	
	}
	


</script>

</body>
</html>